<template>
  <div class="meeting-room-xq">
    <span style="margin-right:10px;">连续天数:</span>
    <a-select v-model="lxts" default-value="7" style="width: 120px;border-radius: 2px;" @change="">
      <a-select-option value="7">
        7
      </a-select-option>
      <a-select-option value="15">
        15
      </a-select-option>
      <a-select-option value="30">
        30
      </a-select-option>
    </a-select>
    <a-button class="blue-btn" style="margin-left:20px;" type="primary" @click="searchEvent">搜索</a-button>
    <table border="1" cellspacing="0" class="meeting-room-table">
      <tr>
        <th
          v-for="(item,i) in columnsVxe[0]"
          :key="i"
          class="meettingroom-th">
          {{ item }}
        </th>
      </tr>
      <tr v-for="(item,i) in columnsVxe" :key="i">
        <td v-if="i !== 0" v-for="(items,index) in item">{{ items }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import {list} from './service/index.js'
export default {
  data() {
    return {
      lxts: 7,
      columnsVxe: [],
    }
  },
  created(){
    list({lxts:this.lxts}).then(res => {
      if(res.code == 200){
        this.columnsVxe = res.result.hysList
      } else {
        this.$message.warning(res.message)
      }
    })
  },
  methods: {
    // 搜索
    searchEvent(){
      list({lxts:this.lxts}).then(res => {
        // //console.log(res)
        if(res.code == 200){
          this.$message.success(res.message)
          this.columnsVxe = res.result.hysList
        } else {
          this.$message.warning(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
  .meeting-room-xq {
    background-color: #fff;
    padding: 20px;
    td {
      height: 40px !important;
      line-height: 40px;
      text-align: center;
    }
  }
  .red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
  }
  .meeting-room-table {
    width: 100%;
    height: 80%;
    overflow: auto;
    margin-top: 20px;
    font-size: 14px;
    border-color: #d9d9d9;
  }
  .meettingroom-th {
    text-align: center;
    height: 40px !important;
    background-color: #DEE5ED;
  }
</style>
